<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="src/css/layui.css">
</head>

<body>
    <!-- 导航 -->
    <ul class="layui-nav">
        <li class="layui-nav-item">
            <a href="javascript:;">用户中心</a>
        </li>
        <li class="layui-nav-item">
            <a href="javascript:;">轮播图</a>
        </li>
        <li class="layui-nav-item">
            <a href="javascript:;">列表</a>
        </li>
        <li class="layui-nav-item">
            <a href="javascript:;">订单管理</a>
        </li>
        <li class="layui-nav-item">
            <a href=""><img src="https://t.cn/RCzsdCq" class="layui-nav-img">我</a>
            <dl class="layui-nav-child">
                <dd><a href="javascript:;">修改信息</a></dd>
                <dd><a href="javascript:;">安全管理</a></dd>
                <dd><a href="javascript:;">退了</a></dd>
            </dl>
        </li>
    </ul>
    <!-- 内容 -->
    <div class="content">
        <table id="demo" lay-filter="test"></table>
        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-xs" lay-event="detail">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
        </script>
        <!-- 工具栏模板： -->
        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
                <!-- <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
                <button class="layui-btn layui-btn-sm" lay-event="update">编辑</button> -->
            </div>
        </script>
    </div>

    <script src="src/layui.js"></script>
    <script>
        layui.use(function() {
            let table = layui.table,
                $ = layui.jquery,
                layer = layui.layer
            var str = `<div class="layui-form-item">
                <label class="layui-form-label">imgUrl</label>
                <div class="layui-input-block">
                <input type="text" name="imgUrl" required  lay-verify="required" placeholder="imgUrl" autocomplete="off" class="layui-input imgUrl">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">href</label>
                <div class="layui-input-block">
                <input type="text" name="href" required  lay-verify="required" placeholder="href" autocomplete="off" class="layui-input href">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">title</label>
                <div class="layui-input-block">
                <input type="text" name="title" required  lay-verify="required" placeholder="title" autocomplete="off" class="layui-input title">
                </div>
            </div>`
                //执行一个 table 实例
            getData()

            function getData() {
                table.render({
                    elem: '#demo',
                    height: 600,
                    url: 'server/getliebiao.php' //数据接口
                        ,
                    title: '用户表',
                    page: true //开启分页
                        ,
                    toolbar: '#toolbarDemo' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
                        // , totalRow: true //开启合计行
                        ,
                    cols: [
                        [ //表头
                            {
                                field: 'goods_id',
                                title: 'goods_id',
                                sort: true,
                                fixed: 'left'
                            }, {
                                field: 'goods_name',
                                title: '商品名',
                            }, {
                                field: 'goods_price',
                                title: '价格',
                                sort: true
                            }, {
                                field: 'goods_number',
                                title: '数量',
                                sort: true
                            }, {
                                field: 'cat_id',
                                title: '类目',
                                sort: true
                            }, {
                                field: 'goods_introduce',
                                title: '商品详情介绍',
                                sort: true
                            }, {
                                field: 'goods_big_logo',
                                title: '大图',
                                sort: true
                            }, {
                                field: 'goods_small_logo',
                                title: '小图',
                                sort: true
                            }, {
                                fixed: 'right',
                                width: 150,
                                align: 'center',
                                toolbar: '#barDemo'
                            }

                            // , { field: 'score', title: '评分', width: 80, sort: true, totalRow: '{{ parseInt(d.TOTAL_NUMS) }} 分' }
                            // , { field: 'city', title: '城市', width: 150 }
                            // , { field: 'sign', title: '签名', width: 200 }
                            // , { field: 'classify', title: '职业', width: 100 }
                            // , { field: 'wealth', title: '财富', width: 135, sort: true, totalRow: true }

                        ]
                    ]
                });
            }
            //监听头工具栏事件
            table.on('toolbar(test)', function(obj) {
                var checkStatus = table.checkStatus(obj.config.id),
                    data = checkStatus.data; //获取选中的数据

                switch (obj.event) {
                    case 'add':
                        layer.confirm(str, {
                            // btn: ['按钮一', '按钮二'] //可以无限个按钮
                        }, function(index, layero) {
                            //按钮【按钮一】的回调
                            // layer.msg('添加');
                            $.ajax({
                                url: 'server/addBanner.php',
                                type: 'post',
                                data: {
                                    imgUrl: $('.imgUrl').val(),
                                    href: $('.href').val(),
                                    title: $('.title').val()
                                },
                                success(res) {
                                    // console.log(res)
                                    let obj = JSON.parse(res)

                                    layer.msg(obj.msg);
                                    getData()
                                }
                            })
                        });

                        break;
                };
            });
            //监听行工具事件
            table.on('tool(test)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data //获得当前行数据
                    ,
                    layEvent = obj.event; //获得 lay-event 对应的值
                if (layEvent === 'detail') {
                    layer.confirm(`<div class="layui-form-item">
                            <label class="layui-form-label">imgUrl</label>
                            <div class="layui-input-block">
                            <input value="${data.imgUrl}" type="text" name="imgUrl" required  lay-verify="required" placeholder="imgUrl" autocomplete="off" class="layui-input imgUrl">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">href</label>
                            <div class="layui-input-block">
                            <input  value="${data.href}" type="text" name="href" required  lay-verify="required" placeholder="href" autocomplete="off" class="layui-input href">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">title</label>
                            <div class="layui-input-block">
                            <input value="${data.title}" type="text" name="title" required  lay-verify="required" placeholder="title" autocomplete="off" class="layui-input title">
                            </div>
                        </div>`, function(index, layero) {
                        $.ajax({
                            url: 'server/putBanner.php',
                            type: 'post',
                            data: {
                                id: data.id,
                                imgUrl: $('.imgUrl').val(),
                                href: $('.href').val(),
                                title: $('.title').val()
                            },
                            success(res) {
                                // console.log(res)
                                let obj = JSON.parse(res)

                                layer.msg(obj.msg);
                                getData()
                            }
                        })
                    });
                } else if (layEvent === 'delete') {
                    //下拉菜单
                    $.ajax({
                        url: 'server/delliebiao.php',
                        data: {
                            id: data.id - 0
                        },
                        type: 'post',
                        success(res) {
                            let obj = JSON.parse(res)
                            layer.msg(obj.msg);
                            getData()
                        }
                    })
                }
            });
        })
    </script>
</body>

</html>